<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.agentName }}
          </span>
          <el-tag type="warning" size="small">
            正常
          </el-tag>
          <el-tag
            v-if="formData.flowStatus === 'DOING'"
            type="warning"

            size="small"
          >
            <span>签约开户审核中</span>
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <template
          v-if="formData.flowStatus ==='REFUSE' || formData.flowStatus ==='REPEAL' ||
            formData.flowStatus ==='REJECT' || formData.flowStatus ===''"
        >
          <el-button class="border-btn" size="small" @click="handlChange">变更信息</el-button>
          <el-button
            class="main-btn"

            size="small"
            type="primary"
            @click="handlSigning"
          >签约开户
          </el-button>
        </template>
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px">
      <el-form :inline="true" label-position="left" size="small" class="filter-form-inline">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="代理商编号：">
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="所在地区：">
              {{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content" style="margin-top: 20px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <el-form
            :inline="true"
            label-position="left"
            size="small"
            class="filter-form-inline"
            label-width="82px"
          >
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系人：">
                  <span>{{ formData.userName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系电话：">
                  <span>{{ formData.tel }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="统一社会信用代码：" label-width="140px">
                  <span>{{ formData.creditCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建时间：">
                  <span>{{ dateFormat("yyyy-mm-dd HH:MM:SS",formData.createdAt) }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建人：">
                  <span>{{ formData.creatorName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="代理合同" name="2">
          <contract ref="contractRef" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="3">
          <operation-view mode="agent_base" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <!--新建潜在代理商 -->
    <agentDialog ref="agentDialog" :type-title="typeTitle" @succsess="succsess" />
    <!--新建签约开户 -->
    <formSign ref="formSign" @succsessFormSign="succsessFormSign" />
    <!--代里合同-->

  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Details',
  components: {
    agentDialog: defineAsyncComponent(() => import('../modules/potentialAgent/agentDialog.vue')),
    formSign: defineAsyncComponent(() => import('../modules/potentialAgent/formSign.vue')),
    contract: defineAsyncComponent(() => import('../../commonView/contract/contract.vue')),
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    var data = reactive({
      agentDialog: null,
      formSign: null,
      typeTitle: '',
      formData: {},
      activeName: '1',
      contractRef: null,
      contractData: {
        id: Number(route.query.id),
        name: '',
        contractType: 'agent',
        contractObjectType: 'agent',
        title: '代理合同详情',
        disabled: true,
      }
    })

    // 返回
    const handlBack = () => {
      router.go(-1)
    }

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then(res => {
        if (res.code === 0) {
          data.formData = res.data.agent
          data.contractData.name = data.formData.agentName
        }
      })
    }

    // 变更
    const handlChange = () => {
      data.typeTitle = '变更潜在代理商'
      setTimeout(() => {
        data.agentDialog.open(data.formData)
      }, 100)
    }

    // 签约开户
    const handlSigning = () => {
      data.formSign.open(route.query.id)
    }

    const succsess = () => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    }

    const succsessFormSign = () => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    }

    //* *****************
    onMounted(_ => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    })
    //* *****************
    return {
      ...toRefs(data),
      handlBack,
      handlChange,
      handlSigning,
      handlDetail,
      succsess,
      succsessFormSign
    }
  }
}

</script>

<style scoped>
  :deep(.col) {
    padding: 0 !important;
  }
</style>
